<template>
  <div id="home">
    <nav-bar class="home-nav">
     <div slot="center">购物街</div>
    </nav-bar>
  <!-- 滚动 -->
   <scroll class="content" ref="scrollcom" :probe-type="3" @scroll="contentscroll" 
   :pull-up-load="true"  >
    <home-swiper :childbanners="banners" ></home-swiper>
    <home-recommend-view :childrecommends="recommends"></home-recommend-view>
    <feature-view></feature-view>
    <tab-control :titles="['流行','新款','精选']" class="tab-control" @hometabclick="tabclick"></tab-control>
    <goods-list :childgoods="goods[currentType].list"></goods-list>
   </scroll>
   <!-- 直接监听整个组件的点击(需要加.native，一般监听之呢个监听button，mouse等)，用于回到顶部, -->
   <back-top @click.native="backClick" v-show="isShow"></back-top>

    
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue';
import HomeSwiper from './childComps/HomeSwiper.vue';
import HomeRecommendView from './childComps/HomeRecommendView.vue';
import FeatureView from './childComps/FeatureView.vue';
import TabControl from '@/components/content/tabControl/TabControl.vue';
import GoodsList from '@/components/content/goods/GoodsList.vue';
import Scroll from '@/components/common/scroll/Scroll.vue';
import BackTop from '@/components/content/backTop/BackTop.vue';

import { getHomeMultidata,getHomeGoods } from '@/network/home';



export default {
    name:'Home',
    components:{
      NavBar,
      HomeSwiper,
      HomeRecommendView,
      FeatureView,
      TabControl,
      GoodsList,
      Scroll,
      BackTop,
       
       
    },
    data(){
      return {
          banners:[],
          recommends:[],
          // 商品列表数据
          goods:{
            'pop':{page:0,list:[]},
            'new':{page:0,list:[]},
            'sell':{page:0,list:[]}
          },
          currentType:'pop',
          isShow:false
      }
    },
    created(){
      //封装，调用函数中的方法
      this.getHomeMultidata()

      // 请求商品数据,封装
     this.getHomeGoods('pop')
     this.getHomeGoods('new')
     this.getHomeGoods('sell')
    },

    mounted(){
      // 通过防抖函数调用上拉加载更多
      //  const refresh=this.debounce(this.$refs.scroll.refresh)
      //  this.$bus.$on('itemImageLoad',()=>{
      //   refresh()
      //  })
    },
    methods:{
        // 请求轮播图数据
     getHomeMultidata(){
      getHomeMultidata().then(res=>{
        this.banners=res.data.banner.list;
        this.recommends=res.data.recommend.list;
      })
     },
     getHomeGoods(type){
      const page = this.goods[type].page + 1 
        getHomeGoods(type, page).then(res => {
          // console.log('res',res.data.list);
          
          this.goods[type].list.push(...res.data.list)
          
          this.goods[type].page += 1
          // this.$refs.scrollcom.finishPullUp()
      })
     },
  //  tab栏切换，子组件事件回传
     tabclick(index){
       switch(index){
        case 0:
          this.currentType='pop'
          break
        case 1:
          this.currentType='new'
          break
        case 2:
          this.currentType='sell'
          break
       }
       
     },
    //  回到页面顶部方法
     backClick(){
          this.$refs.scrollcom.scrollTo(10,10)
     },
     contentscroll(position){
        this.isShow=-(position.y)<1000
     },
    //  上拉加载更多
    contentpullingUp(){
         this.getHomeGoods(this.currentType)
        //  图片是异步加载的，它先计算的小的item的大小，图片后来才出来的，将item撑大了，
        // 所以计算出现了偏差，所以要刷新一下
        // this.$refs.scrollcom.refresh()
     },
    //  防抖函数
    debounce(func,delay){
      let timer=null
      return function(...args){
        timer=setTimeout(()=>{
          func.apply(this,args)
        },delay)
      }
    }
    }
}
</script>

<style scoped>
#home{
  /* padding-top: 44px; */
  /* 就是100%视口高度 */
  height: 100vh;
}
.home-nav{
  background-color: pink;
}

.tab-control{
  position: sticky;
  top:44px;
}

</style>